<template>
	<view>
		<view class="gui-skeleton-animate" :style="styles" v-if="!show"></view>
		<view v-if="show">
			<slot></slot>
		</view>
	</view>
</template>
<script>
export default{
	data() {
		return {
			show:false
		}
	},
	props:{
		styles    : {type : String, default : ''},
		delayTime : {type : Number, default : 800}
	},
	created:function(){
		setTimeout(()=>{
			this.show = true;
		}, this.delayTime);
	}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
@keyframes gui-skeleton-animate{0%{opacity:1;} 50%{opacity:0.8;} 100%{opacity:1;}}
.gui-skeleton-animate{animation:gui-fade-in 400ms ease-in alternate;}
/* #endif */
</style>
